<!--  -->
<template>
  <div class="Work-Info-wrap">
    <!-- 顶部导航栏-->
    <van-sticky>
      <van-nav-bar title="作业详情"
                   left-arrow
                   @click-left="onClickLeft">
        <template #left>
          <van-icon class="my-icon"
                    name="arrow-left"
                    size="18" />
        </template>
      </van-nav-bar>
    </van-sticky>
    <div class="commonWrap workInfo">
      <div class="workInfo-title">
        <van-cell :title="data.workInfo.title"><template #icon>
            <van-icon name="column"
                      size="24"
                      color="#87d4eb" /> </template></van-cell>
      </div>
      <div class="workInfo-content">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        {{ data.workInfo.content }}
      </div>
    </div>
    <div class="commonWrap workInput">
      <van-form @submit="onSubmit">
        <van-field name="uploader">
          <template #input>
            <van-uploader class="my-uploader"
                          upload-icon="plus"
                          v-model="data.workInfo.fileList" />
          </template>
        </van-field>

        <van-cell-group class="workInput-wrap"
                        inset>
          <van-field v-model="message"
                     rows="3"
                     autosize
                     type="textarea"
                     placeholder="在这输入你的答案~" />
        </van-cell-group>

        <van-button round
                    block
                    type="primary"
                    native-type="submit">
          提交
        </van-button>
      </van-form>
    </div>
  </div>
</template>

<script>
import { reactive, getCurrentInstance } from 'vue'
export default {
  setup () {
    const { ctx, proxy } = getCurrentInstance()
    const state = reactive({})
    const data = reactive({
      workInfo: {
        title: '谈谈你最喜欢的一种鱼',
        content:
          '在无穷无尽的大海里有许多不同的鱼，比如海豚、鲨鱼、小丑鱼等等。你有最喜欢的小鱼，快来给老师分享分享吧~',
        fileList: [
          { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
          { url: 'https://img.yzcdn.cn/vant/sand.jpg' }
        ]
      }
    })
    function onClickLeft () {
      window.history.length > 1
        ? proxy.$router.go(-1)
        : proxy.$router.push('/search')
    }
    return {
      state,
      data,
      onClickLeft
    }
  }
}
</script>
<style lang='scss' scoped>
.Work-Info-wrap {
  margin: 0;
  padding: 0;
  width: 100%;
}
.workInfo {
  .van-cell {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 16px;
    .van-icon {
      padding-right: 10px;
    }
  }
  &-title {
    font-weight: 700;
  }
  &-content {
    padding-top: 10px;
    font-size: 12px;
  }
}
.workInput {
  &-wrap {
    .van-cell {
      border: 1px solid black;
      border-radius: 20px;
    }
  }
  .van-form {
    .van-button {
      margin: auto;
      margin-top: 5px;
      height: 30px;
      width: 200px;
      background-color: $theme-color1;
      border-radius: 10px;
      border: 0px;
    }
  }
}
.van-uploader > .van-uploader__wrapper > .van-uploader__upload {
  width: 20px;
  height: 20px;
}
</style>
